<template>
  <div class="list">
    <ul>
      <li @click="goFlowers()">鲜花</li>

      <li @click="goBouquet()">花束</li>
      <li @click="goGiftbox()">礼盒</li>
      <li @click="goCake()">蛋糕</li>
      <li>花篮</li>
      <li>绿植</li>
      <li>周花</li>
      <li>母亲节鲜花</li>
    </ul>
    <div class="hr">
      

    </div>

  </div>
</template>

<script>
export default {
  methods: {
    goGiftbox() {

      this.$router.push({ path: '/giftboxs' }).catch(err => err)
    },
    goFlowers() {
      this.$router.push({ path: '/flowers' }).catch(err => err)
    },
    goCake(){
      this.$router.push({ path: '/cakes' }).catch(err => err)
    },
    goBouquet(){
      this.$router.push({ path: '/bouquets' }).catch(err => err)
    }
  },

}
</script>

<style lang="scss">
.list {
  
  ul {

    li {
      font-size: 24px;
      display: inline;
      margin-left: 100px;
      font-weight: bold;
    }

    li:hover {
      color: #884e22;
      cursor: pointer;
    }
  }

  height: 50px;
  line-height: 50px;

}
</style>